<html>
  <head>
    <title>Text Anchors</title>
    <meta name="description" content="Text Anchors - A-Frame">
    <script src="../../../dist/aframe-master.js"></script>
  </head>
  <body>
    <a-scene background="color: #222" auto-enter-vr="display:all">
      <a-assets>
        <a-mixin
          id="marker"
          geometry="primitive: plane; width: 0.057; height: 0.057"
          material="color: #C03546"
        ></a-mixin>
      </a-assets>

      <a-entity id="marker0" mixin="marker" position="0 0 -3.99"></a-entity>
      <a-entity id="marker1" mixin="marker" position="0 1 -3.99"></a-entity>
      <a-entity id="marker2" mixin="marker" position="0 2 -3.99"></a-entity>
      <a-entity id="marker3" mixin="marker" position="0 3 -3.99"></a-entity>
      <a-entity id="marker4" mixin="marker" position="0 4 -3.99"></a-entity>
      <a-entity id="marker5" mixin="marker" position="0 5 -3.99"></a-entity>
      <a-entity id="marker6" mixin="marker" position="0 6 -3.99"></a-entity>
      <a-entity id="marker7" mixin="marker" position="0 7 -3.99"></a-entity>

      <a-entity
        position="0 0 -4"
        geometry="primitive: plane; width: 2"
        material="color: #0000FF"
        text="color: white; align: center; font: dejavu;
              value: a-text align='center' (anchor='align') DejaVu width 2 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890"
      ></a-entity>

      <a-text
        id="textPrimitive"
        position="0 1 -4"
        align="left" anchor="left" width="5"
        value="anchor='left' (default align) 123456789012345678901234567890123456789012345678901234567890">
      </a-text>

      <a-entity
        position="0 2 -4"
        geometry="primitive: plane; width: 5"
        material="color: #333333"
        text="color: white; anchor: center; font: sourcecodepro;
              value: anchor='center' (default align) SourceCodePro 123456789012345678901234567890123456789012345678901234567890"
      ></a-entity>

      <a-entity
        position="0 3 -4"
        text="color: white; baseline: top; anchor: right; width: 5; font: aileronsemibold;
              value: anchor='right' baseline='top' (default align) Aileron-Semibold 123456789012345678901234567890123456789012345678901234567890"
      ></a-entity>

      <a-entity
        position="0 4 -4"
        text="color: white; align: left; width: 5; font: exo2semibold;
              value: align='left' (default anchor) Exo2SemiBold 123456789012345678901234567890123456789012345678901234567890"
      ></a-entity>

      <a-entity
        position="0 5 -4"
        text="color: white; align: center; width: 5; font: kelsonsans;
              value: align='center' (default anchor) KelsonSans 123456789012345678901234567890123456789012345678901234567890"
      ></a-entity>

      <a-entity
        position="0 6 -4"
        text="color: white; align: right; width: 5; font: monoid;
              value: align='right' (default anchor) Monoid 123456789012345678901234567890123456789012345678901234567890"
      ></a-entity>

      <a-entity
        position="0 7 -4"
        geometry="primitive: plane; width: 8; height: auto"
        material="color: #0000FF"
        text="color: white; align: center; font: https://cdn.aframe.io/fonts/DejaVu-sdf.fnt;
              value: a-plane align:center (anchor:align) DejaVu width 8 1234567890123456789012345678901234567890">
      </a-entity>

      <a-entity position="0.0 3.8 1.5">
        <a-entity camera look-controls wasd-controls></a-entity>
      </a-entity>
    </a-scene>
  </body>
</html>
